<template>
  <div class="mapModule">
    <div class="mapModuleFuncGroup">
      <el-tooltip class="item" effect="dark" content="图层列表" placement="right">
        <div
          :class="{active:moduleSelectedIndex===1}"
          @click="moduleSelectedIndex=1,headerTitle='图层列表'"
        >
          <i class="kfb-icon-kehuxinxiliebiao" />
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="标绘" placement="right">
        <div
          :class="{active:moduleSelectedIndex==2}"
          @click="moduleSelectedIndex=2,headerTitle='标绘'"
        >
          <i class="kfb-icon-xiugai" />
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="行政定位" placement="right">
        <div
          :class="{active:moduleSelectedIndex==6}"
          @click="moduleSelectedIndex=6,headerTitle='行政定位'"
        >
          <i class="kfb-icon-zhongjianjian" />
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="路径规划" placement="right">
        <div
          :class="{active:moduleSelectedIndex==4}"
          @click="moduleSelectedIndex=4,headerTitle='路径规划'">
          <i class="kfb-icon-licheng"/>
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="缓冲查询" placement="right">
        <div
          :class="{active:moduleSelectedIndex==5}"
          @click="moduleSelectedIndex=5,headerTitle='缓冲查询'">
          <i class="kfb-icon-icon-test10"/>
        </div>
      </el-tooltip>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="moduleSelectedIndex!==0" class="mapModuleMain">
        <div class="layerlist-header">
          <span>{{ headerTitle }}</span>
          <i
            type="text"
            class="mapModulePanelClose el-icon-close"
            style="float: right;"
            @click="close"
          />
        </div>
        <div class="mapModuleContent">
          <!-- <layerTree v-show="moduleSelectedIndex===1" /> -->
          <plot-panel v-show="moduleSelectedIndex===2" />
          <pathPlan v-show="moduleSelectedIndex==4" :path-plan-hander="pathPlanHander"/>
          <buffer-query v-show="moduleSelectedIndex===5"/>
          <DistrictLocation v-show="moduleSelectedIndex==6"/>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
// import layerTree from '@/pages/yzt/components/layerTree'
import plotPanel from '@/pages/yzt/components/plotPanel'
import pathPlan from '@/pages/yzt/components/pathPlan'
import BufferQuery from '@/pages/yzt/components/BufferQuery'
import DistrictLocation from '@/pages/yzt/components/districtlocation'

export default {
  // layerTree
  components: { pathPlan, plotPanel, BufferQuery, DistrictLocation },
  data() {
    return {
      moduleSelectedIndex: 0,
      headerTitle: '图层列表'
    }
  },
  computed: {
    pathPlanHander() {
      return this.moduleSelectedIndex
    }
  },
  methods: {
    close() {
      if (this.moduleSelectedIndex === 6) {
        this.bus.$emit('map.qxj.clear', [])
      }
      this.moduleSelectedIndex = 0
    }
  }
}
</script>

<style>
.mapModule {
  position: absolute;
  z-index: 999;
  height: 100%;
  /* width: 400px; */

}

/* .mapModuleFuncGroup {
  width: 48px;
  height: 100%;
  background-color: #fff;
} */

.mapModuleFuncGroup > div {
  width: 40px;
  height: 40px;
  background: rgba(128, 128, 128, 0.5);
  text-align: center;
  line-height: 40px;
  margin-top: 18px;
  margin-left: 8px;
  /* border-bottom: 1px solid firebrick; */
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.mapModuleFuncGroup > div:hover {
  background: #d9e9ff;
  color: #fff;
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
}

.mapModuleFuncGroup > div > i {
  font-family: "iconfont" !important;
  font-size: 20px;
}

.mapModule .mapModuleMain {
  position: absolute;
  left: 55px;
  width: 336px;
  padding: 0px;
  top: 18px;
  /*background: rgba(128, 128, 128, 0.8);*/
  background: rgba(0, 0, 0, 0.3);
}

.mapModule .collapseIcon {
  width: 20px;
  height: 76px;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -38px;
  cursor: pointer;
  background: url(/static/img/oneMap/collapse.png) center no-repeat;
}

.mapModule .mapModulePanelClose {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.mapModule .layerlist-header {
  color: #fff;
  padding: 6px 15px;
  padding-right: 4px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "microsoft yahei", arial, tahoma, helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  background-color: #398f8699;
  margin-bottom: 5px;
}

.mapModuleContent {
  padding: 7px;
}

.mapModuleFuncGroup .active {
  color: #fff;
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
  background: #d9e9ff;
}
</style>
